<template>
	<div class="app-container">
		<div class="list-box" v-loading="listLoading" element-loading-text="Loading">
			<div class="list-item" v-for="item in dataList" :key='item.url'>
				<div class="info-box">
					<div class="title">{{item.title}}</div>
					<div class="info">{{item.digest}}</div>
				</div>
				<img class="item-image" :src="item.picurl"/>
				<div class="time">{{item.createdAt}}</div>
			</div>
		</div>
		<div class="page-box">
			<el-pagination background layout="prev, pager, next" :total="total" @current-change='sizePageChange'>
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				total: 0,
				listLoading: true
			}
		},
		mounted() {

		},
		created() {
			this.getDataList(1);
		},
		methods: {
			getDataList(page) {
				this.listLoading = true;
				this.$axios.get('/GsdataArticles/getList', {
					params: {
						page,
						size: 10
					}
				}).then((res) => {
					console.log(res,'========获取的信息======')
					this.total = res.data.data.total;
					this.dataList = res.data.data.list;
					this.listLoading = false;
				}).catch((err) => {
					console.log(err,'==========获取信息错误========')
				})
			},
			sizePageChange(page){
				console.log(page,'==========')
				this.getDataList(page)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-container {
		height: calc(100vh - 50px);
		overflow: hidden;
		display: flex;
		flex-flow: column;
		.list-box{
			flex: 1;
			padding-bottom: 10px;
			box-sizing: border-box;
			overflow-y: scroll;
			.list-item{
				padding: 10px 0;
				border-bottom: solid 1px #efefef;
				.info-box{
					.title{
						padding-bottom: 10px;
					}
					.info{
						font-size: 14px;
						color: #2299DD;
					}
				}
				.time{
					text-align: right;
					color: #E4E7ED;
				}
			}
		}
		.page-box{
			text-align: center;
		}
	}
</style>